<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品中心</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/alert.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/common1.css">
    <link rel="stylesheet" href="../css/commodity.css">
<style>
.dis-del-sale{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
   
}
</style>
</head>
<body>
<!--搜索框-->
<header class="aui-bar aui-bar-nav" id="aui-header" style="position:fixed;">
    <div class="aui-col-xs-3 my-col-xs-3" style="width:15%;">
        <i class="aui-iconfont aui-icon-left"></i>
    </div>
    <div class="aui-title my-aui-title">友惠家</div>
    <div class="aui-col-xs-3" style="float: right;width: 20%;" id="addsearch">
        <i class="aui-iconfont aui-icon-search"></i>
    </div>
    
</header>
    <div class="aui-searchbar" id="search"  style="height:0;margin-top: 2.2rem;border-top: solid 1px #fff;">
        <div class="aui-searchbar-input aui-border-radius">
            <form class="search-form">
                <i class="aui-iconfont aui-icon-search"></i>
                <input type="search" placeholder="请输入搜索内容" id="search-input" autocomplete="off">
                <div class="aui-searchbar-clear-btn" id="clean-search">
                    <i class="aui-iconfont aui-icon-close"></i>
                </div>
            </form>
        </div>
        <div class="aui-searchbar-btn aui-text-info" tapmode style="cursor:pointer">搜索</div>
    </div>

	<div class="aui-searchbar classify">
		<ul class="classify-ul">
			
		</ul>
	</div>
<script type="text/x-handlebars-template" id="discount-classify">
    			{{#each data}}
   					<li data_id="{{id}}">{{name}}</li>
   				 {{/each}}
			</script>
<!--中间部分-->
<section class="comm-box"  style="margin-top:4.6rem;">
    <!--筛选部分-->
    <div class="dis-select-box" id="dis-select-box" style="display:none;">
        <script type="text/x-handlebars-template" id="select-template">
            <select class="dis-shop-type" id="shop-type-box">
                {{#each this}}
                <option value="{{id}}">{{name}}({{count}})</option>
                {{/each}}
            </select>

            <select class="dis-shop-sort">
                <option value="">默认排序</option>
                <option value="priceAsc">价格由低到高</option>
                <option value="priceDesc">价格由高到低</option>
                <option value="salesDesc">销量由高到低</option>
            </select>
            <div class="dis-screen-btn">筛选</div>
            <div class="dis-screen">
                <div class="dis-screen-price">
                    <div class="dis-price-section">价格区间</div>
                    <div class="dis-screen-select">
                        <input type="number" class="dis-low-price" placeholder="最低价">
                        <div class="dis-price-line"></div>
                        <input type="number" class="dis-high-price" placeholder="最高价">
                    </div>
                    <div class="dis-price-section">商品销量</div>
                    <div class="dis-screen-select">
                        <input type="number" class="dis-low-sales" placeholder="最低销量">
                        <div class="dis-price-line"></div>
                        <input type="number" class="dis-high-sales" placeholder="最高销量">
                    </div>
                    <div class="aui-list-item-inner">
                        <label><input class="aui-radio servenBack" type="checkbox" name="radio2"> 退货免运费</label>
                    </div>
                    <div id="nmbConfirm" onclick="sxbtn()">确定</div>
                </div>
            </div>
        </script>
    </div>
    <div class="newbox" style="width:100%;"><img src="../images/grab.png"></div>
    <!--列表渲染-->
    <div id="dis-list-vessel" class="mar-bottom">
        <script type="text/x-handlebars-template" id="discount-list-template">
            {{#each products}}
            <a  class="display-box">
                <div class="dis-list-box" data-shopid="{{id}}" data-productid="{{productId}}">
                    <div class="dis-shop-img">
                        <img src="../images/moren.jpg" data-src="{{mainImageUrl}}" alt="">
					
                    </div>
                    <div class="dis-list-content">
                        <div class="dis-shop-detail">
                           
                            <span class="shop-list-name">{{name}}</span>
                        </div>
                        <!--<div class="dis-price">
                            <span>优惠价:{{productPrice}}元</span>

                        </div>-->
                        <div class="sales-price">

                            <div class="dis-sales">
                                <div><span>劵后价：<b>¥{{productPrice}}</b> / <font style="color:#e51c08">赚</font><b>{{marketProfit}}</b></span></div>
                                <div class="dis-original-price">友惠价：¥{{productOrginPrice}}</div>
                                <div class="sales-volume"> <span>销量：{{totalSales}}</span></div>

                                <!--<span>佣金率 <span>{{splitNumber commission}}%</span></span>
                                <span>京东价:¥{{oriPrice}}</span>
                                <span class="hongbao youhuiquan">红包券 <span>{{conTicketPrice}}</span>元</span>
                                <span class="dis-share" data-id="{{id}}" >分享</span> <span>赚:{{commissionProfit}}元</span>-->
                            </div>
                           <div class="dis-evaluate" data-id="{{id}}">
                                <div class="hj-redbao-price"><b>{{productHongbao}}</b>元</div>
                                <div class="dis-share" ></div>
                            </div>

                        </div>


                    </div>
                </div>
            </a>
            {{/each}}
        </script>
    </div>
    <div class="loading">加载更多...</div>
    <div class="no-info">没有更多信息了...</div>
    <div class="default-height"></div>

    <!--立即分享-->
    <section class="wxmass-sends">
        <section class="wxmass-sends-item">
            
            <ul class="wxmass-item-list">
                <li class="share-firends">
                    <div class="wxmass-item-list-img">
                        <img src="../images/wx.png" alt="">
                        <p style="text-align:center;margin-top: 0.1rem;">朋友</p>
                    </div>
                   
                </li>
                <li class="share-firends-quan">
                    <div class="wxmass-item-list-img">
                        <img src="../images/friends.png" alt="">
                        <p style="text-align:center;margin-top: 0.1rem;">朋友圈</p>
                    </div>
                    
                </li>
            </ul>
            
            <div class="wxmass-item-title"> 取消分享 </div>
        </section>
    </section>


<section class="share-loading">
    <img src="../images/yhjloading.jpg" alt="">
</section>
<!--底部栏-->
<footer class="aui-bar aui-bar-tab" id="footer" style="display:none;">
    <a href="index.html">
        <div class="aui-bar-tab-item" tapmode>
            <img class="footer-icon-img" src="../images/JD_click.png" alt="">
            <div class="aui-bar-tab-label">首页</div>
        </div>
    </a>
    <a href="extension.html">
        <div class="aui-bar-tab-item" tapmode>
            <i class="aui-iconfont aui-icon-calendar"></i>
            <div class="aui-bar-tab-label">分享中心</div>
        </div>
    </a>
    <a href="javascript:;">
        <div class="aui-bar-tab-item my-aui-active" tapmode>
            <i class="aui-iconfont aui-icon-cert"></i>
            <div class="aui-bar-tab-label">商品中心</div>
        </div>
    </a>
    <a href="my.html">
        <div class="aui-bar-tab-item" tapmode>
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-bar-tab-label">我</div>
        </div>
    </a>
</footer>

<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/handlebars-v4.0.10.js"></script>
<script src="../js/config.js"></script>
<script src="../js/function.js"></script>
<script src="../js/alert.js"></script>
<script src="../js/common.js"></script>
<script src="../js/aui-lazyload.js"></script>
<script src="../js/api.2.0.js"></script>
<script src="../js/api.js"></script>
<script src="../js/search.js"></script>
<script>

/**
 * Created by Administrator on 2017/7/26.
 */

//商品信息
var shoptpl=$('#discount-list-template').html();
var shopTemplate=Handlebars.compile(shoptpl);
//筛选(全部)
var selectTpl=$('#select-template').html();
var selectCmp=Handlebars.compile(selectTpl);
//分类
var classifytpl = $('#discount-classify').html();
var classifyTemlate = Handlebars.compile(classifytpl);
//后台获取的首页数据(ajax请求地址)
var uri=C.interface.discount;
//后台获取的首页数据(获取商品分类)
var selectUri=C.interface.selectType;

//ajax加载商品列表(分页)
var categoryId='',orderType='',pageLength=5,minMaxPrice='',minMaxSales='';

var range = 200, //距下边界长度/单位px
    maxnum = 0, //设置总数
    num = 0, //当前数量
    totalheight = 0,
    flag=0,
    start='0',
    searchName='';

//获取商品类别(全部，男装，女装,饮料，家电)
$.ajax({
    url:selectUri,
    type:'get',
    dataType:'json',
    data:{},
    success:function (response) {
        if (response.result=='success'){
            //商品类别(全部，男装，女装,饮料，家电)
            var selectData=response.data;
            //console.log(selectData);
            //handlebars渲染数据
            $('#dis-select-box').html(selectCmp(selectData));
            //加载商品数据
            ajaxGetShopData();
            //点击全部，可以选择商品类别
            $(document).on('change','.dis-shop-type',function () {
                //清空整个列表的数据
                $('#dis-list-vessel').empty();
                //
                categoryId=$(this).val();
                console.log(categoryId);
                num=0;
                start = num;
                //加载商品数据
                ajaxGetShopData();
            });
            $(document).on('change','.dis-shop-sort',function () {
                $('#dis-list-vessel').empty();
                orderType=$(this).val();
                console.log(orderType);
                num=0;
                start = num;
                ajaxGetShopData();
            });

            /*筛选按钮的切换*/
            $('.dis-screen-btn').click(function () {
                $(this).toggleClass('dis-screen-active');
                $('.dis-screen').toggle();
            });

        }else if (response.result=='login'){
        	dialog.tusiError('您还没有登录，请登录');
            againLogin();
        }else {
        	dialog.tusiError(response.errorMsg);
        }
    }

});

//搜索
$(document).on('click','.aui-text-info',function () {
    searchName=$('#search-input').val();
    if (searchName==''){
        return false;
    }
    $('#dis-select-box').hide();
    $('#dis-list-vessel').empty();
    num=0;
    start = num;
    ajaxGetShopData();
});
//删除文本之后请求数据。
$(document).on('click','#clean-search',function () {
    $('#dis-select-box').show();
    $('#dis-list-vessel').empty();
    searchName='';
    num=0;
    start = num;
    ajaxGetShopData();
});


ajaxGetShopData();
//监听滚动高度，加载数据
$(window).on('scroll',function () {
    var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
    //console.log("滚动条到顶部的垂直高度: " + $(document).scrollTop());
    //console.log("页面的文档高度 ："+$(document).height());
    //console.log('浏览器的高度：'+$(window).height());
    totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

    if (num>=maxnum){
        return;
    }
    if (($(document).height()-range)<=totalheight&&num<maxnum){
        //这里不能使用模板填充，应该是append()....
        ajaxGetShopData();
    }
});

//加载商品数据
function ajaxGetShopData() {
   
    //如果条件不成立直接不执行
    if (flag){
        return;
    }
    //条件成立
    //显示加载更多
    $(".no-info").hide();
    $('.loading').show();
    flag=1;
    $.ajax({
        url:uri,
        type:'get',
        dataType:'json',
        data:{
            categoryId:categoryId,
            orderType:orderType,
            start:start,
            length:pageLength,
            minMaxPrice:minMaxPrice,
            minMaxSales:minMaxSales,
            name:searchName
        },
        success:function (response) {
            if (response.result=='success'){
                //显示加载隐藏
                $('.loading').hide();
                //每次都加1
                num++;
                //请求回来的数据
                var data=response.data;
                //console.log(data);
                //商品的总数
                maxnum=data['productCount'];
                //因为数据库采用的是行偏移量，所以这里需要num*pageLength
                start=num*pageLength;
                //当上平的总数等于0的时候显示没有更多信息了...
                if(maxnum == 0){
                    $(".no-info").show();
                }
                //如果请求回来的数据条数大于0，在数据后插入新新数据，不覆盖旧数据;否则就显示没有更多信息了
                if (data.products.length>0){
                    $('#dis-list-vessel').append(shopTemplate(data));
                    new auiLazyload({
                        errorImage:'../image/errorimg.png'
                    });
                }else {
                    $(".no-info").show();
                    num=maxnum+1;
                }
                flag=0;
               
                //这里添加立即分享事件
                
                $('.dis-evaluate').bind('click',nowTuiGuang);
                //取消分享弹框
                $('.wxmass-item-title').click(function () {
                	//alert('11');
                    $('.wxmass-sends').hide();
                });
            }else if (response.result === 'login'){
            	dialog.tusiError('登入过期，请重新登入！');
                againLogin();
            }
        },
        error:function () {
            //alert('服务器异常');
        }
    })
}

//京东分类
$.ajax({
    url:selectUri,
    type:'get',
    dataType:'json',
    success:function (data) {
    	var len = data.data.length;
    	var allwidth = 91*len;
    	console.log(data)
    	$(".classify-ul").css('width',allwidth);
    	$('.classify-ul').append(classifyTemlate(data));
    	yhclassify();
    },
    error:function () {
        //alert('服务器异常');
    }
});
function yhclassify(){
	$(".classify-ul li").eq(0).addClass('addcol');
	$(".classify-ul li").click(function(){
		var index = $(this).index();
		$(".classify-ul li").removeClass('addcol');
    	$(".classify-ul li").eq(index).addClass('addcol');
      	 event.preventDefault();
      	 categoryId = $(this).attr('data_id');
      	 $('#dis-select-box').hide();
           $('#dis-list-vessel').empty();
           num = start = 0;
           ajaxGetShopData();
      	 
      })
}

//立即分享
function nowTuiGuang(event) {
    event.preventDefault();
    event.stopPropagation();
    var loading=dialog.loading();

    var that = $(this);
    var thisPapa = that.parents('.dis-list-box');
    var thisImg = thisPapa.find('.dis-shop-img').find('img').attr('src');
   // var shareProductId = thisPapa.data('shopid');
    var shareProductId = $(this).attr("data-id");
    console.log(shareProductId);
	//alert('11');
    //localStorage.setItem('shareId', shareProductId);

    $('.wxmass-item-img').find('img').attr('src', thisImg);


    $.ajax({
        url: C.marketInterface.shareFriend,
        type: 'get',
        dataType: 'json',
        data: {
            token: C.marketToken,
            productId: shareProductId
        },
        complete:function () {
            loading.close();
        },
        success: function (response) {
            if (response.result == 'success') {
                console.log(response.data);
                var imgUrl = response.data.imgUrl;
                var url = response.data.url;
                var title = response.data.title;
                var content = response.data.content;

                $('.share-loading').hide();
                $('.wxmass-sends').show();


                $('.share-firends').bind('click', function (event) {
			
                    getShareType(event, '1');

                });

                $('.share-firends-quan').bind('click', function (event) {
                    getShareType(event, '2');
                });
                $('.share-QQ').bind('click',function (event) {
                    getShareType(event, '3');
                });
                $('.share-weibo').bind('click',function (event) {
                    getShareType('event','4');
                });

                function getShareType(event, type) {
                    event.preventDefault();
                    var shareData = {
                        postType: 'shareProducts',
                        productId: shareProductId,
                        type: type,
                        url: url,
                        imgUrl: imgUrl,
                        title: title,
                        content: content
                    };
                   

                    var ua = navigator.userAgent.toLowerCase();
                    if (/iphone|ipad|ipod/.test(ua)) {

                        console.log(shareData);
                        iosShare(shareData);
                        event.stopPropagation();
                    } else {
					    //alert('11');
                        console.log(shareData);
                        androidShare(JSON.stringify(shareData));
                        event.stopPropagation();
                    }
                }

            }else if (response.result === 'login'){
            	dialog.tusiError('登入过期，请重新登入！');
                againLogin();
            }
        },
        error: function () {
            //alert('服务器异常');
        }
    });
}

//拉取安卓分享
function androidShare(param) {
    window.huifa.shareProducts(param);
}

//拉取iOS分享

function iosShare(param) {
    window.webkit.messageHandlers.shareProducts.postMessage(param);
}



//筛选
$('#nmbConfirm').on('click',function () {
   // alert("1111111111")
    getScreen();
});
$('.all-mask').bind('click',function () {
    $('.dis-screen-price').hide();
});





//商品筛选
function getScreen() {

    $('.all-mask').show();
    var shopType=$('.dis-shop-type').val();
    var shopSales=$('.dis-shop-sort').val();
    var lowPrice=$('.dis-low-price').val();
    var highPrice=$('.dis-high-price').val();
    var lowSales=$('.dis-low-sales').val();
    var highSales=$('.dis-high-sales').val();
    var minMaxPrice=lowPrice+'-'+highPrice;
    var minMaxSales=lowSales+'-'+highSales;
    var servenBack=null;
    if ($('.servenBack').is(':checked')){
        servenBack=1;
    }else {
        servenBack=0;
    }
    if (lowPrice==''&&highPrice==''&&lowSales==''&&highSales==''){
        $('.all-mask').hide();
        $('.dis-screen-btn').removeClass('dis-screen-active');
        $('.dis-screen').hide();
        return false;
    }
    if (lowPrice>highPrice||lowSales>highSales){
    	dialog.tusiError('输入的区间有误');
        return false;
    }
    $.ajax({
        url:uri,
        dataType:'json',
        type:'get',
        data:{
            categoryId:shopType,
            orderType:shopSales,
            minMaxPrice:minMaxPrice,
            minMaxSales:minMaxSales,
            isServenBack:servenBack
        },
        success:function (response) {
            if (response.result=='success'){
                //console.log(response.data);
                var data=response.data;
                $('#dis-list-vessel').append(shopTemplate(data));
                $('.dis-low-price').val('');
                $('.dis-high-price').val('');
                $('.dis-low-sales').val('');
                $('.dis-high-sales').val('');
                $('.all-mask').hide();
                $('.dis-screen').hide();
                $('.dis-screen-btn').removeClass('dis-screen-active');

                new auiLazyload({
                    errorImage:'../image/error-img.png'
                });
            }else {
            	dialog.tusiError(response.errorMsg);
            }
        }
    });
}





//
Handlebars.registerHelper('hongbao',function (sales) {
    if (sales==null){
        return null;
    }else {
        return sales;
    }
});
//包邮不包邮
Handlebars.registerHelper('exemption',function (value) {
    if (value=='001'){
        return '退货免邮费';
    }else if (value=='002'){
        return '退货不包邮';
    }
});



$(document).ready(function () {
    new auiLazyload({
        errorImage:'../images/error-img.png'
    });
});

</script>
<!-- <script src="../js/commodity.js"></script> -->
</body>
</html>